<template>
    <div class="flex center">
        <!-- <shibawan></shibawan> -->

        <!-- 组件 -->
        <test-cmp
            :text.sync="text"
            :formatText.sync="numberText"
            unit="个"
            :option="{ size: 'big' }"
            :testList="[{ name: 'A' },{ name: 'B' },{ name: 'C' }]"
            @formatText="onFormatText"
        >
            <!-- <template #default="{ data, unit }">
                <p class="def-view">{{ `${data} ${unit}` }}</p>
            </template> -->
    
            <!-- slot="header" slot-scope="{ data }" -->
            <template #header="{ data }">
                <p>{{ `我是标题 (${data})` }}</p>
            </template>

            <template #footer>
                <p>我是尾巴</p>
            </template>

        </test-cmp>

        <!-- 父类视图及操作 -->
        <div class="flex">
            <p class="bv-hint">{{ `父类数据: text = ${text} / numberText = ${numberText}` }}</p>
        </div>


    </div>
</template>
<script>
    import TestCmp from '../../components/TestCmp'
    import Shibawan from '../../components/Shibawan'

    export default {
        components: { TestCmp, Shibawan },
        data () {
            return {
                text: 0,
                numberText: '',
            }
        },
        created () {
            this.text = 5;
        },
        methods: {
            onFormatText (val) {
                
                console.log('onFormatText = ', val);

            },
        }
    }
</script>
<style>
    .bv-hint {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
    }
    .def-view {
        width: 130px;
        font-size: 22px;
        color: #409EFF;
        font-weight: bold;
    }
</style>